import React, {Component} from 'react'
import PropTypes from 'prop-types'

export default class Search extends Component{



    /*外部传递过来的函数属性*/
    static propTypes = {
        setSearchName: PropTypes.func.isRequired
    }

    search = () => {
        /*input传递参数的时候我使用的是非受控组件*/
        // 1.得到输入的关键字
        const searchName = this.input.value.trim()
        if (searchName) {
            // 2.搜索
            this.props.setSearchName(searchName)
        }
    };

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>

                    <input type="text" placeholder="enter the name you search"
                           ref={input => this.input = input}/>
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        )
    }
}

